<template>
		<div class="container">
				<v-visual-view>
						<mapView ref="mapView"></mapView>
						<Header @change="change" @jumpToSystem="jumpToSystem" :select="['风暴潮','海浪']"></Header>
						<div class="hud-left"></div>
						<div class="hud-right"></div>
						<router-view @addLayer="addLayerToMap"></router-view>
				</v-visual-view>
		</div>
</template>
<script>
import router from "../router";
import visualView from "@/components/visualView/visualView.vue"

export default {
		mounted() {
				router.push("/systemContainer/oneMap");
		},
		methods: {
				change(type) {
						console.log('灾害类型', type)
				}, addLayerToMap(message) {
						this.$refs.mapView.addOlLayer(message);
				},
				/**
				 * 系统跳转
				 */
				jumpToSystem(name) {
						switch (name) {
								case 0:
										router.push("/systemContainer/oneMap");
										this.$refs.mapView.open();
										break;
								case 1:
										router.push("/systemContainer/modelEvaluation");
										this.$refs.mapView.close();
										break;
								case 2:
										router.push("/systemContainer/hazardEvaluation");
										this.$refs.mapView.close();
										break;
								case 3:
										router.push("/systemContainer/policySystem");
										this.$refs.mapView.close();
										break;
								case 4:
										router.push("/systemContainer/emulation");
										this.$refs.mapView.close();
										break;
								case 5:
										router.push("/systemContainer/supportServices");
										this.$refs.mapView.close();
										break;
						}
				},
		},
		components: {
				mapView: () => import("./mapView.vue"),
				Header: () => import("./header/header.vue"),
				'v-visual-view': visualView
		},
};
</script>
<style lang="css">
.container {
//height: 100%; //width: 100%; //position: relative; height: 100%;
		width: 100%;
		background: #121d2f;

		.visual-app {
				height: 100%;
				width: 100%;

				header {
						width: 100%;
						height: 95px;
				}

				section {
						width: 100%;
						padding: 25px 16px;
						height: calc(100% - 95px);
						color: aliceblue;
				}
		}
}


.hud-left {
		position: fixed;
		width: 50px;
		height: 70%;
		background-image: url('~@/assets/images/hud-left.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		left: 0;
		top: 18%
}

.hud-right {
		position: fixed;
		width: 50px;
		height: 70%;
		background-image: url('~@/assets/images/hud-right.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		right: 0;
		top: 18%
}
</style>
